<template>
  <div class="proprotion">
    <h3>师生比调整</h3>
    <div class="top-btn">
      <el-button :type="showBySportId?'success':''" size="small" @click="choiceSport"> 运动项目</el-button>
      <el-button :type="showByCoachId?'success':''" size="small" @click="choiceCoach"> 教练员</el-button>
      <el-button :type="showByPlayerId?'success':''" size="small" @click="choicePlayer">运动员</el-button>
    </div>
    <div class="proprotion-body">
      <el-input v-model="search" type="search" size="small" suffix-icon="el-icon-search" class="search" placeholder="快捷检索"></el-input>
      <table v-if="showBySportId"
        class="table table-bordered table-striped table-condensed! mb-none table-hover"
        id="playerCoachMapDatatable">
        <thead>
          <tr>
            <th width="50%">运动项目</th>
            <th width="50%">控制中心
              <el-button @click="sportIdAllChange" size="small" type="primary">全部打开</el-button>
            </th>
          </tr>
          <tr v-for="(item,index) in BySportIdFilter">
            <td> {{item.name}}</td>
            <td>
              <el-switch
                @change="proportionStatusChange(item.sportId,item)"
                style="display: block"
                v-model="item.proportionStatusId == 1"
                active-color="#13ce66"
                inactive-color="#dddddd"
                active-text="开"
                inactive-text="关">
              </el-switch>
            </td>

          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
      <table v-if="showByCoachId"
        class="table table-bordered table-striped table-condensed! mb-none table-hover"
        id="playerCoachMapDatatable">
        <thead>
          <tr>
            <th width="33%">运动项目</th>
            <th width="33%">教练员</th>
            <th width="33%">控制中心
              <el-button @click="sportIdAllChange" size="small" type="primary">全部打开</el-button>
            </th>
          </tr>
          <tr v-for="(item,index) in ByCoachIdFilter">
            <td>{{item.TheSportName}}</td>
            <td> {{item.name}}</td>
            <td>
              <el-switch
                @change="proportionStatusChange(item.coachId,item)"
                style="display: block"
                v-model="item.proportionStatusId == 1"
                active-color="#13ce66"
                inactive-color="#dddddd"
                active-text="开"
                inactive-text="关">
              </el-switch>
            </td>

          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
      <table v-if="showByPlayerId"
        class="table table-bordered table-striped table-condensed! mb-none table-hover"
        id="playerCoachMapDatatable">
        <thead>
          <tr>
            <th width="25%">运动项目</th>
            <th width="25%">教练员</th>
            <th width="25%">运动员</th>
            <th width="25%">控制中心
              <el-button @click="sportIdAllChange" size="small" type="primary">全部打开</el-button>
            </th>
          </tr>
          <tr v-for="(item,index) in ByPlayerIdFilter">
            <td> {{item.TheSportName}}</td>
            <td> {{item.TheCoachName}}</td>
            <td> {{item.name}}</td>
            <td>
              <el-switch
                @change="proportionStatusChange(item.playerId,item)"
                style="display: block"
                v-model="item.proportionStatusId == 1"
                active-color="#13ce66"
                inactive-color="#dddddd"
                active-text="开"
                inactive-text="关">
              </el-switch>
            </td>

          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
      </div>
  </div>
</template>

<script>
  import { updateBySportId, updateByCoachId, updateByPlayerId,allBySportId,allByCoachId,allByPlayerId,pcm4dict } from '@/api/organization.js'
  import { ignoreRolePlayer,coachByOrgIgnoreRole,get_sport_all } from '@/api/dict.js'

  export default {
    data() {
      return {
        value2: true,
        dict_spor_all: {},
        dict_coach: {},
        dict_player: {},
        choiceShowOptions: {},
        BySportId: {},
        ByCoachId: {},
        ByPlayerId: {},
        tableContainer: 'block',
        showBySportId: true,
        showByCoachId: false,
        showByPlayerId: false,
        search: '',
        CSSLISTARR: [
          "mb-xs mt-xs mr-xs btn btn-primary",
          "mb-xs mt-xs mr-xs btn"
        ],
      }
    },
    created() {
      this.init_dict().then(()=>{
          this.init_data()
      })
    },
    methods: {
      sportIdAllChange() {
        if(this.showBySportId){
          this.BySportIdFilter.forEach(item=>{
            if(item.proportionStatusId == 2){
              this.proportionStatusChange(item.sportId,item)
            }
          })
        }else if(this.showByCoachId){
          this.ByCoachIdFilter.forEach(item=>{
            if(item.proportionStatusId == 2){
              this.proportionStatusChange(item.coachId,item)
            }
          })
        }else if(this.showByPlayerId){
          this.ByPlayerIdFilter.forEach(item=>{
            if(item.proportionStatusId == 2){
              this.proportionStatusChange(item.playerId,item)
            }
          })
        }
      },
      init_dict() {
        return new Promise((resolve,reject)=>{
          get_sport_all().then(res=>{
            this.dict_spor_all = res
          })
          coachByOrgIgnoreRole().then(res=>{
            this.dict_coach = res
          })
          ignoreRolePlayer().then(res=>{
            this.dict_player = res
            resolve()
          })
        })
      },
      choiceSport: function() {
        this.showBySportId = true;
        this.showByCoachId = false;
        this.showByPlayerId = false;
      },
      choiceCoach: function() {
        this.showBySportId = false;
        this.showByCoachId = true;
        this.showByPlayerId = false;
      },
      choicePlayer: function() {
        this.showBySportId = false;
        this.showByCoachId = false;
        this.showByPlayerId = true;
      },
      proportionStatusChange: function(id, item) {
        let itemNum = item.proportionStatusId
        if(item.proportionStatusId == 1) {
          itemNum = 2
        }else{
          itemNum = 1
        }
        let paramsId = id
        if (this.showBySportId) {
          updateBySportId({
              sportId: paramsId,
              proportionStatusId: itemNum,
            }).then(res=>{
              if(res.code !== 200) {
                this.$message.error('操作失败！')
              }else{
                if(item.proportionStatusId == 1) {
                  item.proportionStatusId = 2
                  this.$message.success('已关闭！')
                }else{
                  item.proportionStatusId = 1
                  this.$message.success('已打开！')
                }
              }
            })
        } else if (this.showByCoachId) {
          updateByCoachId({
              coachId: paramsId,
              proportionStatusId: itemNum,
            }).then(res=>{
              if(res.code !== 200){
                this.$message.error('操作失败！')
              }else{
                if(item.proportionStatusId == 1) {
                  item.proportionStatusId = 2
                  this.$message.success('已关闭！')
                }else{
                  item.proportionStatusId = 1
                  this.$message.success('已打开！')
                }
              }
            })
        } else if (this.showByPlayerId) {
          updateByPlayerId({
              playerId: paramsId,
              proportionStatusId: itemNum,
            }).then(res=>{
              if(res.code !== 200) {
                this.$message.error('操作失败！')
              }else{
                if(item.proportionStatusId == 1) {
                  item.proportionStatusId = 2
                  this.$message.success('已关闭！')
                }else{
                  item.proportionStatusId = 1
                  this.$message.success('已打开！')
                }
              }
            })
        }
      },
      init_data() {
        allBySportId().then(res=>{
          for (let i in res.data) {
            res.data[i].name = this.dict_spor_all[res.data[i].sportId]
          }
          this.BySportId = res.data
          this.choiceShowOptions = this.BySportId
        })
        allByCoachId().then(res=>{
          for (let i in res.data) {
            res.data[i].name = this.dict_coach[res.data[i].coachId]
          }
          this.ByCoachId = res.data
        })
        allByPlayerId().then(res=>{
          for (let i in res.data) {
            res.data[i].name = this.dict_player[res.data[i].playerId]
          }
          this.ByPlayerId = res.data
        }).then(()=>{
          pcm4dict().then(res=>{
            //教练转运动项目
            for (let k in res.data.coach2SportIdStr) {
              let str = '';
              let coachSportArr = res.data.coach2SportIdStr[k].split(',')
              for (let i = 0; i < coachSportArr.length; i++) {
                if(this.dict_spor_all[coachSportArr[i]]){
                  str += this.dict_spor_all[coachSportArr[i]] + ',';
                }
              }
              for (let j in this.ByCoachId) {
                if (this.ByCoachId[j].coachId == k) {
                  this.ByCoachId[j].TheSportName = str.substring(0, str.length - 1);
                  break
                } else {
                  continue;
                }
              }
            }
            //运动员转运动项目
            for (let k in res.data.player2SportIdStr) {
              let str = '';
              let playerSportArr = res.data.player2SportIdStr[k].split(',')
              for (let i = 0; i < playerSportArr.length; i++) {
                if(this.dict_spor_all[playerSportArr[i]]) {
                  str += this.dict_spor_all[playerSportArr[i]] + ',';
                }
              }
              for (let j in this.ByPlayerId) {
                if (this.ByPlayerId[j].playerId == k) {
                  this.ByPlayerId[j].TheSportName = str.substring(0, str.length - 1);
                  break
                } else {
                  continue;
                }
              }
            }
            //运动员转教练员
            for (let k in res.data.player2CoachIdStr) {
              let str = '';
              let playerCoachArr = res.data.player2CoachIdStr[k].split(',')
              for (let i = 0; i < playerCoachArr.length; i++) {
                if(this.dict_coach[playerCoachArr[i]]){
                  str += this.dict_coach[playerCoachArr[i]] + ',';
                }
              }
              for (let j in this.ByPlayerId) {
                if (this.ByPlayerId[j].playerId == k) {
                  this.ByPlayerId[j].TheCoachName = str.substring(0, str.length - 1);
                  break
                } else {
                  continue;
                }
              }
            }
          })
        })

      },
    },
    computed: {
      BySportIdFilter: function() {
        if (this.showBySportId == false) {
          return
        }
        var _search = this.search;
        if (_search) {
          // es6 filter过滤匹配，有则返回当前，无则返回所有
          return this.BySportId.filter(function(e) {
            //匹配某个字段
            if(e.name){
              return e.name.match(_search);
            }
          })
        };
        return this.BySportId;
      },
      ByCoachIdFilter: function() {
        if (this.showByCoachId == false) {
          return
        }
        var _search = this.search;
        if (_search) {
          // es6 filter过滤匹配，有则返回当前，无则返回所有
          return this.ByCoachId.filter(function(e) {
            //匹配某个字段
            if (e.name) {
              return e.name.match(_search);
            }

          })
        };
        return this.ByCoachId;
      },
      ByPlayerIdFilter: function() {
        if (this.showByPlayerId == false) {
          return
        }
        var _search = this.search;
        if (_search) {
          // es6 filter过滤匹配，有则返回当前，无则返回所有
          return this.ByPlayerId.filter(function(e) {
            //匹配某个字段
            if (e.name) {
              return e.name.match(_search);
            }

          })
        };
        return this.ByPlayerId;
      },
    },
  }
</script>

<style lang="scss" scoped>
  .proprotion{

    .top-btn{
      height: 50px;
      display: flex;
      background-color: #FFFFFF;
      align-items: center;
      padding-left: 20px;
    }
    .search{
      width: 200px;
      float: right;
      margin-bottom: 10px;
    }
    .proprotion-body{
      background-color: #FFFFFF;
      margin-top: 20px;
      padding: 10px;
    }

    .table
    {
        width: 100%;
        border-collapse: collapse;
        margin: 0 auto;
        thead tr{
          border-bottom: 2px solid #ddd;
          font-weight: bold;
        }
    }
    .table td, .table th
    {
        border: 1px solid #ddd;
        color: #777;
        height: 40px;
        padding: 10px;
    }
    .table thead th
    {
        width: 100px;
    }
    .table tr:nth-child(odd)
    {
        background: #f9f9f9;
    }
    .table tr:nth-child(even)
    {
        background: #ffffff;
    }
    .table tr:hover{
      background-color: #f2f9f9;
    }
  }
</style>
